<template>
  <div>
    <creat v-if="showcreat" @close="showcreat = false" :detailId="detailId" @success="refreshList(pageNo)"></creat>
    <show v-else-if="show" @close="show = false" :detailId="detailId"></show>
    <div v-else>
      <basic-container>
        <!-- <el-header> -->
        <div class="flex_between" style="align-items: flex-start;">
          <el-button size="small" type="success" @click="creatNew">新增</el-button>
          <el-form :inline="true" style="text-align: right;" size="small" class="ml10" ref="form" :model="form" @keyup.enter.native="refreshList()">
            <el-form-item label="求购消息标题："><el-input placeholder="请输入" v-model="form.name"></el-input></el-form-item>
            <el-form-item label="联系公司："><el-input placeholder="请输入" style="width: 100px;" v-model="form.fileNumber"></el-input></el-form-item>
            <el-form-item label="联系人："><el-input placeholder="请输入" style="width: 100px;" v-model="form.versionNumber"></el-input></el-form-item>
            <el-form-item label="联系电话："><el-input placeholder="请输入" style="width: 100px;" v-model="form.versionNumber"></el-input></el-form-item>
            <el-form-item label="发布时间：">
              <el-date-picker
                v-model="form.beginTime"
                type="daterange"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                style="width: 300px;"
              ></el-date-picker>
            </el-form-item>
            <el-form-item><el-button type="primary" @click="refreshList(1)">查询</el-button></el-form-item>
            <el-form-item><el-button type="default" plain @click="resetSearch">重置</el-button></el-form-item>
          </el-form>
        </div>
        <!-- </el-header> -->
      </basic-container>
      <basic-container>
        <el-table :data="tableData" :height="$height - 300 + 'px'" v-loading="loading">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="title" label="求购消息标题"></el-table-column>
          <el-table-column prop="company" label="联系公司"></el-table-column>
          <el-table-column prop="name" label="联系人"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
          <el-table-column prop="createTime" label="发布时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="pointer main_co f14" v-if="permission.zlsc_show" @click="handleShow(scope.row)">查看</span>
              <span class="pointer success_f f14 ml30" v-if="permission.zlsc_update" @click="handleUpdate(scope.row)">修改</span>
              <span class="pointer red_f f14 ml30" v-if="permission.zlsc_cancel">删除</span>
            </template>
          </el-table-column>
          <empty slot="empty"></empty>
        </el-table>
        <el-card class="pub_right">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageNo"
            :page-size="pageSize"
            :total="total"
            background
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </el-card>
      </basic-container>
    </div>
  </div>

</template>

<script>
import { getinfobuylist } from '@/api/myapi/common.js';
import creat from './creat.vue';
export default {
  components:{
    creat
  },
  data() {
    return {
      show:false,
      showcreat:false,
      form: {},
      tableData: [],
      pageSize: 10,
      total: 1,
      pageNo: 1,
      detailId:''
    };
  },
  created() {
    this.refreshList();
  },
  methods: {
    // 新建文件
    creatNew(row) {
      if (row) {
        this.detailId = row.id;
      } else {
        this.detailId = '';
      }
      this.showcreat = true;
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList(val);
    },
    refreshList(pageNo = 1) {
      getinfobuylist({}).then(({ data }) => {
        console.log(data);
        if (data & data.success) {
          this.tableData = data.data.records;
          this.total = data.data.total;
        }
      });
    }
  }
};
</script>

<style></style>
